import { UploadOutlined } from "@ant-design/icons";
import { NullAble } from "@pangza-club/utils/types";
import { Avatar, Button, Col, Form, Input, Row, Select, Upload, message } from "antd";
import TextArea from "antd/es/input/TextArea";
import UserHeaderPng from '@/assets/image/login_bg.png';
import { updateUser } from "@/api/user";

interface IProps {
    userData: NullAble<UserVO>;
    setEditeState: (value: boolean) => void;
    onFinish: () => void;
}

const ProfileForm = (props: IProps) => {
    const {userData} = props;
    const [form] = Form.useForm();

    // 处理表单提交
    const handleSubmit = (values: UserVO) => {
        console.log('提交的值：', values);
        updateUser(values).then(() => {
            message.success('个人信息更新成功！');
            props.setEditeState(false);
            props.onFinish();
        }).catch(e => {
            message.error(e);
        });
    };

    // 处理头像上传
    const handleAvatarChange = (info: any) => {
        if (info.file.status === 'done') {
            message.success('头像上传成功！');
        }
    };
    return <Form<UserVO>
        form={form}
        layout="vertical"
        initialValues={userData!}
        onFinish={handleSubmit}
    >
        <Row gutter={24}>
            <Col span={8}>
                <div className="avatar-upload-container">
                    <Upload
                        name="avatar"
                        showUploadList={false}
                        action="/api/upload"
                        onChange={handleAvatarChange}
                    >
                        <div className="avatar-wrapper">
                            <Avatar size={120} src={userData?.avatar || UserHeaderPng} />
                            <div className="avatar-upload-overlay">
                                <UploadOutlined />
                                <div className="upload-text">更换头像</div>
                            </div>
                        </div>
                    </Upload>
                    <div className="avatar-upload-tip">点击头像更换</div>
                </div>
            </Col>
            <Col span={16}>
                <Row gutter={16}>
                    <Col span={12}>
                        <Form.Item
                            name="nickName"
                            label="昵称"
                            rules={[{ required: true, message: '请输入昵称' }]}
                        >
                            <Input placeholder="请输入昵称" />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            name="email"
                            label="邮箱"
                            rules={[
                                { required: true, message: '请输入邮箱' },
                                { type: 'email', message: '请输入有效的邮箱地址' }
                            ]}
                        >
                            <Input placeholder="请输入邮箱" />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={12}>
                        <Form.Item
                            name="phone"
                            label="手机号"
                            rules={[
                                { required: true, message: '请输入手机号' },
                            ]}
                        >
                            <Input placeholder="请输入手机号" />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            name="sex"
                            label="性别"
                        >
                            <Select placeholder="请选择性别">
                                <Select.Option value={1}>男</Select.Option>
                                <Select.Option value={0}>女</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={12}>
                        <Form.Item
                            name="address"
                            label="所在地"
                        >
                            <Input placeholder="请输入所在地" />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            name="company"
                            label="公司"
                        >
                            <Input placeholder="请输入公司名称" />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={12}>
                        <Form.Item
                            name="position"
                            label="职位"
                        >
                            <Input placeholder="请输入职位" />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            name="personalWebsite"
                            label="个人网站"
                        >
                            <Input placeholder="请输入个人网站" />
                        </Form.Item>
                    </Col>
                </Row>
                <Form.Item
                    name="description"
                    label="个人描述"
                >
                    <TextArea rows={4} placeholder="请输入个人描述" />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" style={{ marginRight: 16, backgroundColor: '#417ff9', borderColor: '#417ff9' }}>
                        保存
                    </Button>
                    <Button onClick={() => props.setEditeState(false)}>
                        取消
                    </Button>
                </Form.Item>
            </Col>
        </Row>
    </Form>
}

export default ProfileForm;